<template>
  <div id="bg">
    <div class="box">
      <div id="head">
        <label id="login" style="borderbottom: 3px solid white">Login</label>
        <div class="interval">·</div>
        <label id="register" @click="toRegist">Register</label>
      </div>
      <form>
        <div class="inputbox">
          <input v-model="uid" type="text" name="uid" required="" autocomplete="off"/>
          <label for="uid">Account</label>
        </div>
        <div class="inputbox">
          <input
            v-model="password"
            type="password"
            name="password "
            required=""
          />
          <label for="password">Password</label>
        </div>
        <div class="buttom">
          <input type="button" name="" value="Log" @click="submitLogin" />
          <a class="forget" @click="toForgetPwd">forget password?</a>
        </div>
        <div v-show="tipMessage.length > 0" class="row" style="color: red">
          <p class="tip">{{ tipMessage }}</p>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'login',
  data() {
    return {
      uid: '',
      password: '',
      tipMessage: '',
    };
  },
  methods: {
    toRegist() {
      window.location.href = '/register';
    },
    toForgetPwd() {
      window.location.href = '/forgetPwd';
    },
    validate() {
      let res = true;
      if (this.uid.length === 0) {
        this.tipMessage = '还没有填写账号！';
        res = false;
      } else if (this.password.length === 0) {
        this.tipMessage = '还没有填写密码！';
        res = false;
      }
      return res;
    },
    //提交
    async submitLogin() {
      if (this.validate()) {
        if (true) {
          this.tipMessage = '';
          //  window.location.href = '/index';
          try {
            // const res = await this.$axios.post(`${this.HOST}/user`, {
            const res = await this.$axios.post(
              `http://work.caike.online/user`,
              {
                action: 'login',
                account: this.uid,
                password: this.password,
              }
            );
            console.log(res);
            const info = res.data;
            if (info.status === 1) {
              this.$message({
                message: '登录成功',
                type: 'success',
                offset: 90,
              });
              // 存放 account 的值
              this.$store.dispatch('set_account', this.uid);
              const ownerId = info.ownerId;
              this.$store.dispatch('set_ownerId', ownerId);
              // 设置状态为 已登录
              this.$store.dispatch('set_Login', true);
              sessionStorage.setItem('Login', 'true');
              // 登录成功跳转的页面
              window.location.href = '/index';
              // alert("换页面");
            } else if (info.status == 0) {
              this.$message({
                message: '用户名已存在！',
                type: 'error',
                offset: 70,
              });
            } else {
              this.$message({
                message: '用户名或密码错误！',
                type: 'error',
                offset: 70,
              });
            }
          } catch (err) {
            // alert('登录失败呢'),
            this.$message({
              message: '登录失败',
              type: 'error',
              offset: 70,
            });
            console.log(err);
          }
        }
      }
    },
  },
};
</script>

<style scoped>
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  background-size: cover;
}

#bg {
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/login-pic.jpg');
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: -10; */

  background-position: center 0;
  /* background-repeat: no-repeat; */
  /* background-attachment: fixed;
  background-size: cover; */
  /* -webkit-background-size: cover;
  -o-background-size: cover; */
  zoom: 1;
  opacity: 1;
}

.box {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 25px;
  background: rgba(0, 0, 0, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

#head {
  display: flex;
  flex-direction: row;
  width: 200px;
  justify-content: space-between;
  margin: auto;
}
#login {
  margin: 0 0 10px;
  padding: 0;
  /*文字居中*/
  text-align: center;
  font-size: 25px;
  color: white;
  font-weight: bold;
}
.interval {
  font-size: 18px;
  color: white;
  display: inline-block;
  margin-left: 5px;
}
.box .inputbox {
  position: relative;
}
.box .inputbox input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线*/
  background: transparent;
  /*背景颜色为透明*/
}
.box .inputbox label {
  /*<label> 标签为 input 元素定义标注（标记）*/
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  /*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
  transition: 0.5s;
  /*过渡时间5s*/
}
.box .inputbox input:focus ~ label,
.box .inputbox input:valid ~ label {
  top: -18px;
  left: 0;
  color: #03a9f4;
  font-size: 14px;
}
.box input[type='button'] {
  background: transparent;
  border: none;
  outline: none;
 
  font-size: 16px;
  color: #fff;
  background: #03a9f4;
  padding: 15px 20px;
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
  border-radius: 10px;
}
.buttom {
  widows: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.forget {
  margin-right: 5px;
  font-size: 10px;
  text-decoration: none;
  color: white;
  margin-bottom: 5px;
}
.forget:hover {
  color: rgba(3, 169, 244);
  text-decoration: underline;
  cursor: pointer;
}
#register {
  font-size: 25px;
  color: white;
  font-weight: bold;
}
#register:hover {
  color: #03a9f4;
  /* font-size:30px; */
  text-decoration: underline;
  cursor: pointer;
  /* 手指 */
}
</style>
